<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大麦网</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./SuperSlide2.1-demo-00/jquery1.42.min.js"></script>
    <script src="./SuperSlide2.1-demo-00/jquery.SuperSlide.2.1.3.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>">``
</head>
<body>
    <!-- header部分开始 -->
    <header>
        <div class="center">
        <img src="./images/logo.png" alt="">
        <div class="all">
            <div class="main">全国</div>
            <div class="big">当前城市</div>
        </div>
        
        <a href="">首页</a>
        <a href="">分类</a>

          <!-- <ul class="center-ul">
            <li><a href="">全国</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">分类</a></li>
          </ul>  -->
          <div class="search">
            <input type="text" name="" id="" value="搜索明星，演出，体育赛事">
            <button>搜索</button>  
          </div>
          
          <div class="top-right">
              <div class="top-right1">
                  <a href="./register.html">登录</a>
                  <ul>
                    <li>个人信息</li>
                    <li>账号设置</li>
                    <li>订单管理</li>
                  </ul> 
              </div>
              <div class="top-righ2">
                <a>下载</a>
                <div class="top-right21"><img  src="./images/erweima.jpg" alt=""></div>
              </div>
        </div>
        </div>
    </header>
    <!-- 轮播图开始 -->
    <div id="slideBox" class="slideBox">
        <div class="hd">
            <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
        </div>
        <div class="bd">
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/lunbo1.jpg" /></a></li>
                <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/lunbo2.jpg" /></a></li>
                <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/lunbo3.jpg" /></a></li>
                <li><a href="http://www.SuperSlide2.com" target="_blank"><img src="./images/lunbo4.png" /></a></li>
            </ul>
        </div>
        <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
			<a class="prev" href="javascript:void(0)"></a>
			<a class="next" href="javascript:void(0)"></a>

		</div>
    <nav>
        <div class="center2">
            <ul>
                <li>
                   <p class="p1"></p> 
                   <p class="pp">演唱会</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">话剧歌剧</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">体育</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">儿童亲子</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">展览休闲</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">曲苑杂坛</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">舞蹈芭蕾</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">二次元</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">旅游展览</p>
                </li>
                <li>
                    <p class="p1"></p> 
                   <p class="pp">旅游展览</p>
                </li>
            </ul>
        </div>
    </nav>
    <div>
        <main>
            <div class="main1">
                <p class="p1">演唱会</p>
                <p class="p2"><a>查看全部</a></p>
            </div>
            <div class="main2">
                <div class="main21">
                    <p></p>
                    <p>"磐石上的芽"——张超个人专辑<br>发布音乐会<br>￥368起</p>
                </div>
                <div class="main22">
                    <ul>
                        <li>
                            <img src="images/hua1.jpg" alt="">
                            <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                        </li>
                        <li>
                            <img src="images/hua2.png" alt="">
                            <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                        </li>
                        <li>
                            <img src="images/hua3.jpg" alt="">
                            <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                        </li>
                        <li>
                            <img src="images/hua4.png" alt="">
                            <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                        </li>
                        <li>
                            <img src="images/hua5.jpg" alt="">
                            <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                        </li>
                        <li>
                            <img src="./images/yan7.jpg" alt="">
                            <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                        </li>
                    </ul>
    
                </div>
            </div>
            </main>
            <main class="main-a">
                <div class="main1">
                    <p class="p1">话剧歌剧</p>
                    <p class="p2"><a>查看全部</a></p>
                </div>
                <div class="main2">
                    <div class="main21">
                        <p></p>
                        <p>"磐石上的芽"——张超个人专辑<br>发布音乐会<br>￥368起</p>
                    </div>
                    <div class="main22">
                        <ul>
                            <li>
                                <img src="images/hua6.jpg" alt="">
                                <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                            </li>
                            <li>
                                <img src="images/hua7.jpg" alt="">
                                <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                            </li>
                            <li>
                                <img src="images/hua1.jpg" alt="">
                                <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                            </li>
                            <li>
                                <img src="images/hua2.png" alt="">
                                <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                            </li>
                            <li>
                                <img src="images/hua3.jpg" alt="">
                                <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                            </li>
                            <li>
                                <img src="images/yan7.jpg" alt="">
                                <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                            </li>
                        </ul>
        
                    </div>
                </div>
                </main>
                <main class="main-b">
                    <div class="main1">
                        <p class="p1">儿童亲子</p>
                        <p class="p2"><a>查看全部</a></p>
                    </div>
                    <div class="main2">
                        <div class="main21">
                            <p></p>
                            <p>"磐石上的芽"——张超个人专辑<br>发布音乐会<br>￥368起</p>
                        </div>
                        <div class="main22">
                            <ul>
                                <li>
                                    <img src="images/yan1.jpg" alt="">
                                    <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                                </li>
                                <li>
                                    <img src="images/yan2.jpg" alt="">
                                    <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                                </li>
                                <li>
                                    <img src="images/yan3.png" alt="">
                                    <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                                </li>
                                <li>
                                    <img src="images/yan4.jpg" alt="">
                                    <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                                </li>
                                <li>
                                    <img src="images/yan5.jpg" alt="">
                                    <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                                </li>
                                <li>
                                    <img src="images/hua6.jpg" alt="">
                                    <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                                </li>
                            </ul>
            
                        </div>
                    </div>
                </main>
    </div>
    <main class="main-c">
        <div class="main1">
            <p class="p1">体育比赛</p>
            <p class="p2"><a>查看全部</a></p>
        </div>
        <div class="main2">
            <div class="main21">
                <p></p>
                <p>"磐石上的芽"——张超个人专辑<br>发布音乐会<br>￥368起</p>
            </div>
            <div class="main22">
                <ul>
                    <li>
                        <img src="images/hua1.jpg" alt="">
                        <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                    </li>
                    <li>
                        <img src="images/hua2.png" alt="">
                        <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                    </li>
                    <li>
                        <img src="images/hua3.jpg" alt="">
                        <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                    </li>
                    <li>
                        <img src="images/hua4.png" alt="">
                        <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                    </li>
                    <li>
                        <img src="images/hua5.jpg" alt="">
                        <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                    </li>
                    <li>
                        <img src="./images/yan7.jpg" alt="">
                        <p>打扰一下乐团[黑色罗曼史]2022春夏...</p>
                    </li>
                </ul>

            </div>
        </div>
    </main>
    <div class="side">
      <div class="sidetop">
        <p><strong>大麦</strong></p>
        <p>APP下载</p>
      </div>
      <div class="sidebottom">
        <p></p>
        <p>回到顶部</p>
      </div>
    </div>
    <div class="footer">
        <div class="footer-center">
            <ul>
                <li>帮助中心</li>
                <li>公司介绍</li>
                <li>品牌识别</li>
                <li>公司大事记</li>
                <li>协议及隐私权政策</li>
                <li>廉政举报</li>
                <li>联系合作</li>
                <li>招聘信息</li>
                <li>防骗秘籍</li>
            </ul>
            <div class="footer1">
                <div class="footer11">
                    <img src="./images/logo.png" alt="">
                    <img src="https://img.alicdn.com/tfs/TB1TBEJSkvoK1RjSZFNXXcxMVXa-280-280.jpg" alt="">
                </div>
                <div class="footer12">
                    <p>在线客服</p>
                    <p>京ICP证031057号|京ICP备i031057号|京公网安备11010502037341|广播电视节目制作经营许可证(京)字第02253号</p>
                    <p>网络文化经营许可证 京网文[2019]4082-420号|营业性演出许可证京市演587号</p>
                    <p>北京大麦文化传媒发展有限公司 版权所有大麦网copyright2003-2020ALL Right Reserved</p>
                    <p>举报投诉：damai _tousu@member.alibaba.com浙江省杭州市余杭区文一西路969号</p>
                    <p>违法不良信息举报电话：020-62108294</p>
                </div>
            </div>
            
        </div>


    </div>
</div>
    <script>
        jQuery(".slideBox").slide({mainCell:".bd ul",effect:"leftLoop",autoPlay:true});
    </script>
    <script>
        var data = [
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
        ];
        var big = document.querySelector(".big");
        var main = document.querySelector(".main");
        function itemFn(aa) {
            main.innerHTML = aa;
        }
        data.map((item) => {
        
            big.innerHTML += `<span class="item" onclick="itemFn('${item}')">${item}</span>`;
        });
    </script>
</body>
</html>